<script setup>
import { defineComponent, onMounted, ref, watch } from 'vue';

const props = defineProps({
  value: {
    default: () => ''
  },
  prop: String,
  refName: String,
  options: Array,
  defaultSloat: Object,
  empty: Object,
  type: { // 可选 panel | cascader
    type: String,
    default: 'cascader'
  },
  change: {
    type: Function,
    default: () => {}
  },
  visibleChange: {
    type: Function,
    default: () => {}
  },
  blur: {
    type: Function,
    default: () => {}
  },
  focus: {
    type: Function,
    default: () => {}
  },
  expandChange: {
    type: Function,
    default: () => {}
  },
  removeTag: {
    type: Function,
    default: () => {}
  }
})

const val = ref(props.value)
watch(() => props.value, newVal => {
  val.value = newVal
})

const emit = defineEmits(['input', 'getRef'])
emit('input', val) // 传递给父组件

const cascaderRef = ref(null)
const name =  props.refName || `${props.prop}Ref`
onMounted(() => {
  emit('getRef', { name, value: cascaderRef.value })
})

const dSloat = defineComponent(props.defaultSloat)
const emptySloat = defineComponent(props.empty)
</script>

<template>
  <el-cascader
    v-if="type === 'cascader'"
    ref="cascaderRef"
    v-model="val"
    :options="options"
    v-bind="$attrs"
    @change="change"
    @visible-change="visibleChange"
    @blur="blur"
    @focus="focus"
    @expand-change="expandChange"
    @remove-tag="removeTag">
    <template v-if="defaultSloat">
      <dSloat />
    </template>
    <template #empty v-if="empty">
      <emptySloat />
    </template>
  </el-cascader>
  <el-cascader-panel 
    v-else 
    ref="cascaderRef"
    v-model="value"
    :options="options"
    v-bind="$attrs"
    @change="change"
    @expand-change="expandChange">
    <template v-if="defaultSloat">
      <dSloat />
    </template>
  </el-cascader-panel>
</template>

<style scoped>
.el-cascader{
  width: 100%;
}
</style>
